<template>
  <div class="register-box">
    <div class="register">
      <span style="font-size: 26px;color: #fff">药品数据上报及用药数据分析系统</span>
      <div class="header">
        <h1>用户注册</h1>
      </div>
      <div id="register_form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
              type="text"
              class="form-control"
              id="username"
              name="username"
              v-model="userName"
              placeholder="请输入用户名"
          />
        </div>
        <div class="form-group">
          <label for="nickname">密码</label>
          <input
              type="text"
              class="form-control"
              id="nickname"
              name="nickname"
              v-model="nickName"
              placeholder="请输入密码"
          />
        </div>
        <div class="form-group">
          <label for="password">确认密码</label>
          <input
              type="password"
              class="form-control"
              id="password"
              name="password"
              v-model="password"
              placeholder="请确认密码"
          />
        </div>
        <button class="btn btn-success btn-block" @click="registerBtn">
          注册
        </button>
      </div>
      <div class="message">
        <p>已有账号?
          <router-link to="/login">点击登录</router-link>
          .
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {userRegister} from "../api/user";

export default {
  name: "Register",
  data() {
    return {
      userName: "",
      password: "",
      nickName: "",
    };
  },
  methods: {
    registerBtn() {
      if (this.userName == "") {
        alert("用户名不能为空");
        return;
      } else if (this.password == "") {
        alert("密码不能为空");
        return;
      } else if (this.nickName != this.password) {
        alert("密码输入不一致");
        return;
      } else {
        userRegister({
          userName: this.userName,
          password: this.password,
          nickName: this.nickName,
          avatar: "wutu.gif",
        })
            .then((res) => {
              if (res.flag == true) {
                alert(res.message);
                this.$store.commit("updateLoginUserNickname", this.nickName);
                this.$router.push("/login").catch((err) => err);
              } else {
                alert(res.data);
              }
            })
            .catch((err) => {
              alert(err);
            });
      }
    },
  },
  created() {
  },
};
</script>

<style lang="less" scoped>
@import url("../../node_modules/bootstrap/dist/css/bootstrap.css");

body {
  background-color: #f9f9f9;
}

.register-box {
  box-sizing: border-box;
  // width: 1897px;
  height: 100%;
  padding-top: 150px;
  background: url("../assets/img/login_bg.jpg");
  background-size: 1897px 920px;

  .register {
    width: 400px;
    margin: 0 auto;
    color: #333;

    .header {
      height: 40px;
      text-align: center;

      h1 {
        margin: 0;
        font-size: 20px;
        color: white;
      }
    }

    #register_form {
      padding: 20px;
      margin-bottom: 15px;
      border: 1px solid #d8dee2;
      border-radius: 5px;
      background-color: #fff;
    }

    .message {
      padding: 10px;
      padding-bottom: 0;
      color: white;
      border: 1px solid #d8dee2;
      border-radius: 5px;
      text-align: center;
    }
  }
}
</style>